<html>

<head>
<title>Peaksight - Visualization</title>

<link rel="stylesheet" type="text/css" href="css/style.css"></link>
<link rel="stylesheet" type="text/css" href="css/show.css"></link>
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css' />
<!-- For the dialog css -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<!-- JQuery -->
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript" >

function initialize() {
	c = document.getElementById('commit');
	commit = JSON.parse(c.innerHTML);
	var changes = commit["changes"];
	
	var table = document.getElementById('changes');
	
	for(key in changes){
		var rowCount = table.rows.length;
		var row = table.insertRow(rowCount);

		//insert the key
		var cell = row.insertCell(0);
		cell.innerHTML = key;
		rowCount++;
		
		//insert changes
		row = table.insertRow(rowCount);
		var cell1 = row.insertCell(0);
		cell1.innerHTML = "deletions";
		var cell2 = row.insertCell(1);
		cell2.innerHTML = changes[key]["deletions"];
		rowCount++;
		row = table.insertRow(rowCount);
		var cell1 = row.insertCell(0);
		cell1.innerHTML = "lines";
		var cell2 = row.insertCell(1);
		cell2.innerHTML = changes[key]["lines"];
		rowCount++;
		row = table.insertRow(rowCount);
		var cell1 = row.insertCell(0);
		cell1.innerHTML = "insertions";
		var cell2 = row.insertCell(1);
		cell2.innerHTML = changes[key]["insertions"];
	}
}
</script>

</head>
<body onload="initialize()">

<header>
<div>
<a href="index.html"><img src="img/peaksight.png" /><h1>Peaksight</h1></a>
</div>
</header>

<h2 class="title">${project}</h2>

<div class="commit">
	
	<table>
		<tr>
			<th>Log:</th><td>${log}</td>
		</tr>
		<tr>
			<th>Date:</th><td>${date}</td>
		</tr>
		<tr>
			<th>Revision:</th><td>${rev}</td>
		</tr>
		<tr>
			<th>Author:</th><td>${author}</td>
		</tr>
		<tr>
			<th>Committer:</th><td>${committer}</td>
		</tr>
	</table>
	
	<h3>Changes:</h3>
	<table id="changes">
		
	</table>
</div>

<div class="hidden" id="commit">
	${commit}
</div>
</body>

</html>